<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import type { marketDataType, marketItemType, marketTitleType, pieType, indexType } from '.'
import * as echarts from 'echarts'

import { vw, vh } from '@/utils/viewSize'
import TextStyleMixin from 'echarts/types/src/model/mixin/textStyle.js'
const market = ref()
const marketPie = ref()
const market24 = ref()
const market23 = ref()
const market22 = ref()
const Data24 = ref<Array<pieType>>([])
const Data23 = ref<pieType[]>([])
const Data22 = ref<pieType[]>([])
const marketData: marketDataType<marketTitleType, marketItemType> = [
  ['市场', '2022', '2023', '2024'],
  ['工商银行', 14451.2, 14585.8, 15121.1],
  ['中国石油', 13211, 12273.4, 13255.1],
  ['农业银行', 11286.4, 11265.2, 11382.5],
  ['中国人寿', 10372.4, 10453.9, 10539.1],
  ['贵州茅台', 6772.4, 16653.9, 7039.1],
  ['中国制造', 1772.4, 1853.9, 8139.1],
  ['招商银行', 1772.4, 1653.9, 1639.1],
  ['中国平安', 1572.4, 1553.9, 1539.1],
  ['中国神华', 372.4, 253.9, 10439.1]
]
//过滤出数据项标题
const dataTitle = marketData
  .map((item, index) => {
    return item[0]
  })
  .filter((item, index) => {
    if (index != 0) return item
  })

const data22 = marketData
  .map((item, index) => {
    return item[1]
  })
  .filter((item, index) => {
    if (index != 0) return item
  })
const data23 = marketData
  .map((item, index) => {
    return item[2]
  })
  .filter((item, index) => {
    if (index != 0) return item
  })
const data24 = marketData
  .map((item, index) => {
    return item[3]
  })
  .filter((item, index) => {
    if (index != 0) return item
  })
const initData24 = (xiabiao: number) => {
  marketData.reduce((pre, val, index): any => {
    if (index != 0) {
      // 返回一个数组 数组每一项类型为对象name ： value：
      let pieItem: pieType = {}

      if (xiabiao == 3) {
        pieItem.value = val[xiabiao] as number
        Data24.value.push(pieItem)
      } else if (xiabiao == 2) {
        pieItem.value = val[xiabiao] as number
        Data23.value.push(pieItem)
      } else if (xiabiao == 1) {
        pieItem.value = val[xiabiao] as number
        Data22.value.push(pieItem)
      }
      pieItem.name = val[0]
    }
  })
}

onMounted(() => {
  initCharts()
})
const initCharts = () => {
  var myChart = echarts.init(market.value)
  myChart.setOption({
    baseOption: {
      //       timelineplaychanged: {
      //     type: 'timelineplaychanged',
      //     // 播放状态，true 为自动播放
      //     playState: true
      // },

      timeline: {
        // type: 'timelinePlayChange',

        axisType: 'category',
        autoPlay: true,
        data: ['2022', '2023', '2024'],
        left: '80%',
        right: '80%',
        top: 0,
        lineStyle: {
          color: '#179bf1'
        },
        label: {
          color: '#fff'
        },
        checkpointStyle: {
          color: '#01d8ff',
          symbolSize: vw(10),
          borderColor: 'rgba(1, 216, 255, 0.5)',
          borderWidth: vw(5)
        },
        controlStyle: {
          show: false
        },
        itemStyle: {
          borderColor: '#004b85',
          borderWidth: 1,
          shadowColor: 'rgba(1, 216, 225, 0.5)',
          shadowBlur: 5
        },
        emphasis: {
          label: {
            color: '#01d8ff',
            show: false
          },
          checkpointStyle: {
            color: '#01d8ff',
            borderColor: 'rgba(1, 216, 255, 0.5)',
            borderWidth: 5
          },
          itemStyle: {
            color: '#01d8ff',
            borderColor: 'rgba(1, 216, 225, 0.5)',
            borderWidth: 5
          }
        },
        // // 播放状态，true 为自动播放
        // playState: true,

        playInterval: 3000
      },
      grid: {
        left: '5%',
        top: '20%',
        right: '10%',
        bottom: '5%',
        show: 'false',
        containLabel: true
      },
      // legend: {
      //   //图例
      //   itemWidth: vw(15),
      //   itemHeight: vh(15),
      //   padding: [vw(2), 0, vw(2), 0],
      //   // backgroundColor: 'rgba(10,23,11,0.3)',
      //   textStyle: {
      //     fontSize: vw(12),
      //     color: '#fff',
      //     padding: [0, 0, 0, 0],
      //     width: vw(16),
      //     height: vw(20)
      //   },
      //   show: 'true',
      //   width: vw(20),
      //   height: 'auto',
      //   type: 'scroll',
      //   orient: 'vertical',
      //   right: 0,
      //   bottom: 'center'
      // },
      yAxis: {
        type: 'category',
        nameTextStyle: {
          fontSize: vw(5)
        },
        axisLabel: {
          // color: '#4a9ee8',
          fontSize: vw(10)
        },
        axisLine: {
          show: 'false'
        },
        interval: 20,
        data: dataTitle
      },
      xAxis: {
        name: '市场份额',

        axisLabel: {
          // color: '#4a9ee8',
          fontSize: vw(10)
        },
        splitLine: {
          show: false
        },
        nameTextStyle: {
          fontSize: vw(5)
        }
      },
      color: [
        {
          type: 'linear',
          x: 1,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(254, 50, 223, 1)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(0, 0, 0, 0)' // 100% 处的颜色
            }
          ]
        },
        {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#ee6666' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#c605ff' // 100% 处的颜色
            }
          ]
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#0e4bfb' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#378bff' // 100% 处的颜色
            }
          ]
        }
      ],
      series: [
        {
          type: 'bar', //条形图
          colorBy: 'data', //按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
          showBackground: true,
          grid: {
            show: 'false',
            containLabel: true
          },
          legendHoverLink: true
        }
      ]
      // dataset: [{ source: marketData }],
    },
    options: [
      {
        series: [
          {
            data: data22
          }
        ]
      },
      {
        series: [
          {
            data: data23
          }
        ]
      },
      {
        series: [
          {
            data: data24
          }
        ]
      }
    ]
  })
  var myMarket = echarts.init(marketPie.value)
  myMarket.setOption({
    title: [
      {
        text: '2022年',
        left: '10%',
        bottom: '0%',
        textStyle: {
          color: '#fff',
          fontSize: vw(10)
        }
      },
      {
        text: '2023年',
        left: '46%',
        bottom: '0%',
        textStyle: {
          color: '#fff',
          fontSize: vw(10)
        }
      },
      {
        text: '2024年',
        right: '12%',
        bottom: '0%',
        textStyle: {
          color: '#fff',
          fontSize: vw(10)
        }
      }
    ],

    color: [
      ' rgb(0, 2, 77)',
      'rgb(0, 66, 107)',
      'rgb(0, 79, 251)',
      'rgb(85, 184, 255)',
      'rgb(65, 154, 164)',
      'rgb(70, 179, 219)',
      'rgb(51, 76, 126)',
      'rgb(83, 40, 255)',
      'rgb(51, 0, 255)'
    ],
    // 提示框组件
    tooltip: {
      trigger: 'item',
      showDelay: 20,
      confine: false,
      textStyle: {
        fontSize: vw(15)
      },
      // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    //图例组件
    legend: {
      type: 'scroll',
      data: marketData.map((item, index) => ({
        name: item[0]
        // icon: 'circle'
      })),
      left: '10%',
      top: '0%',
      itemWidth: vw(15),
      itemHeight: vh(15),
      textStyle: {
        color: '#fFF',
        fontSize: vw(10)
      }
    },
    grid: {
      top: '20%',
      bottom: '2%'
    },
    series: [
      {
        name: '【2022年市场份额】',
        type: 'pie',
        radius: '60%',
        center: ['15%', '60%'],
        data: marketData.map((item, index) => ({
          value: item[1],
          name: item[0]
        })),
        label: {
          fontSize: 8,
          color: '#00CCFF'
        },
        labelLine: {
          length: 15,
          length2: 10,
          lineStyle: {
            color: '#3F3F5C'
          }
        },
        itemStyle: {
          // color: function (params: any) {
          //   var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE']
          //   return colorList[params.dataIndex]
          // }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: '【2023年市场份额】',
        type: 'pie',
        radius: '60%',
        center: ['50%', '60%'],
        data: marketData.map((item, index) => ({
          value: item[2],
          name: item[0]
        })),
        label: {
          fontSize: 8,
          color: '#00CCFF'
        },
        labelLine: {
          length: 15,
          length2: 10,
          lineStyle: {
            color: '#3F3F5C'
          }
        },
        itemStyle: {},
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: '【2024年市场份额】',
        type: 'pie',
        radius: '60%',
        center: ['82%', '60%'],
        data: marketData.map((item, index) => ({
          value: item[3],
          name: item[0]
        })),
        label: {
          fontSize: 8,
          color: '#00CCFF'
        },
        labelLine: {
          length: 15,
          length2: 10,
          lineStyle: {
            color: '#3F3F5C'
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {}
      }
    ]
  })

  // myChart.group = 'group'
  // myMarket.group = 'group'
  // echarts.connect('group')
  //自适应
  window.addEventListener('resize', () => {
    console.log('屏幕大小变化')
    myChart.resize()
    myMarket.resize()
  })
}
</script>
<template>
  <div class="market-content">
    <div class="main" ref="market"></div>
    <div class="bin-box" ref="marketPie"></div>
  </div>
</template>

<style lang="scss" scoped>
.market-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: rgb(26, 53, 99);
}
.main {
  flex: 7;
  width: 100%;

  color: rgb(223, 80, 80);
  transform: rotateX('30%');
}

.bin-box {
  flex: 3;

  color: rgb(255, 157, 157);
  transform: rotateX('30%');
  color: rgb(0, 2, 77);
  color: rgb(0, 66, 107);
  color: rgb(0, 79, 251);
  color: rgb(85, 184, 255);
  color: rgb(65, 154, 164);
  color: rgb(70, 179, 219);
  color: rgb(51, 76, 126);
  color: rgb(83, 40, 255);
  color: rgb(51, 0, 255);
}
</style>
